<!DOCTYPE htm
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{$order_no}订单详情</title>
    <script src="/static/js/jquery.min.js"></script>
    <link rel="stylesheet" href="/static/css/alert.css">
    <!-- <link rel="stylesheet" href="/static/css/css.css"> -->
<style>
    .main{
        background-color: #fff;
    }
    .order-info{
        margin: 0px 20px;
        width: 400px;
        padding: 15px;
        background-color: #f8f8f8;
    }
    .order-info table{
        border-collapse: collapse;
    }
    .order-info span a{
        
    }
    .order-info table tr td,
    .order-info table tr th{
        border:1px solid #333;
        min-width: 120px;
        text-align: center;        
    }
    .order-info .hetong{
        width: 100px;
        padding:0px;
        color: #1ca3fd;
        font-weight: bold;
        font-size: 26px;
    }
    .order-info .button{
        width: 120px;
        padding:5px 10px;
        height: 30px;
        line-height: 30px;
        background-color: #1ca3fd;
        color: #fff;
        border-radius: 5px;
    }
    .hetong-message{
        display: none;
        width: 100%;
        background-color: #fff;
    }
    .hetong-message .button{
        width: 100%;
        text-align: center;
    }
    .hetong-message .button a{
        display: inline-block;
        width: 100px;
        height: 30px;
        line-height: 30px;
        background-color: #1ca3fd;
        color: #fff;
        font-size: 16px;
        margin: 10px;
    }
    .hetong-message p{
        width: 90%;
        margin:10px 5%;
    }
    .hetong-message p a{
        text-decoration: none;
        color: #000;
    }
    .hetong-message p span:nth-child(2){
        float: right;
    }
    .yinzhang{
        display: none;
        position: absolute;
        top:80%;
        right: 5%;
        width: 200px;
        height: 200px;
    }
    .yinzhang img{
        width: 100%;
    }
    .save_amount{
        display: none;
        position: absolute;
        top:20%;
        left:50%;
        width: 360px;
        height: 180px;
        margin-left: -180px;
        border: 1px solid red;
        background-color: #fff;
        z-index: 1001;
    }
    .save_amount div{
        width: 100%;
        height: 100px;
    }
    .save_amount div[class="title"]{
        height: 30px;
        line-height: 30px;
        width: 100%;
        text-align: center; 
    }
    .save_amount div label{
        margin-top: 30px;
        width: 80%;
        display: block;
        margin: auto;
    }
    .save_amount div label input{
        border-radius: 5px;
        line-height: 50px;
        height: 50px;
    }
    .save_amount div a{
        display: inline-block;
        width: 45%;
        background-color: #1ca3fd;
        color: #fff;
        text-align: center;
        padding:10px 0px;
        margin: 0px 2.1%;
    }
</style>
</head>
<body>
    <div id="save_hetong_corporate_name_div" class="save_amount">
        <div>
            <label for="hetong_corporate_name">
                <span>合同中的公司名称:</span>
                <input type="text" id="hetong_corporate_name" value="{$info.corporate_name|default=$user_message.corporate_name}">
            </label>
        </div>
        <div>
            <a href="javascript:set_hetong_corporate_name('{$info.order_no}');">修改</a>
            <a href="javascript:hiddenmsg();">取消</a>
        </div>
    </div>
    <div id="save_amount_div" class="save_amount">
        <div class="title"></div>
        <div>
            <label for="amount">
                <span>修改金额:</span>
                <input type="number" id="amount" value="{$info.amount}">
            </label>
        </div>
        <div>
            <a href="javascript:set_amount('{$info.order_no}');">修改</a>
            <a href="javascript:hiddenmsg();">取消</a>
        </div>
    </div>
    <div class="yinzhang" id="yinzhang">
        <img src="/static/images/zhang.png" alt="">
    </div>
    <div class="hetong-message" id="hetong">
        <div id="neirong">
        <p id="c1">甲方：<a href="javascript:set_hetong_corporate_name();">{$info.corporate_name|default=$user_message.corporate_name}</a></p>
        <p>乙方：温州晟成科技信息技术服务有限公司</p> 
        <p>
            依据《中华人民共和国合同法》、《中华人民共和国广告法》及相关法律、法规、规章的规定，甲、乙双方在平等、自愿的基础上，协商一致就网络广告发布事宜达成如下合同条款，以资共同遵守。
        </p>
        <p>
            第一条   合作概况：
        </p>
        <p>
            1.1网络推广服务：{neq name="info.keyword_area" value="百度"}抖音关键词包年{else}百度关键词包年{/neq}。
        </p>
        <p>
            1.2关键词:{volist name="info.info" id="value"}<b>《{$value.keyword}》</b>{/volist}
        </p>
        <p>
            1.3位置要求：广告位；
        </p>
        <p>
            1.4地区要求：
            {volist name="info.address_list" id="value"}
            <span style="float: none;">{$value}</span>
            {/volist}
        </p>
        <p>
            1.5推广时间: {$info.word_hover}；
        </p>
        <p>
            第二条   服务期限
        </p>
        <p>
            2.1 服务期限{$date['create_date']}起至{$date['end_date']}止，共计：{$time['month']}个月
        </p>
        <p>
            2.2 甲方需在本合同到期前60天内与乙方签订续费，乙方负责通知甲方，合同到期后自动停止推广服务。
        </p>
        <p>
            第三条   合同价款及支付方式
        </p>
        <p>
            3.1 本合同价款为：{$info.amount}元，总金额（大写）：{$info.amount_daxie}整。
        </p>
        <p>
            3.2 付款方式：甲方一次性付款至乙方指定账号，乙方在收到甲方款项后开始为甲方提供合同规定的服务。
        </p>
        <p>
            户  名：温州晟成科技信息技术服务有限公司
        </p>
        <p>
            开户行：招商银行温州分行国鼎支行
        </p>
        <p>
            账  号：577 904 088 010 401
        </p>
        <p>
            第四条   争议解决
        </p>
        <p>
            4.1本合同的生效、解释、执行、管辖、争议的解决均适用中华人民共和国法律。
        </p>
        <p>
            4.2 因本合同引起的或与本合同有关的任何争议，甲乙双方可友好协商解决；协商不成，任何一方有权向甲方住所地人民法院提起诉讼。
        </p>
        <p>
            第五条   本合同所订一切条款，甲、乙任何一方不得擅自变更或修改。本合同如有未尽事宜或对本合同的任何修正、更改或增删需由甲乙双方协商另订补充合同，补充合同经双方授权代表签字或盖章后方可发生效力。其本合同一式贰份，甲乙双方各执 壹 份，具有相同效力。本合同经双方签字或加盖公章后生效。
        </p>
        <p>
            备注：                                                                                   
        </p>
        <p>
            <span id="c2">甲方：<a href="javascript:set_hetong_corporate_name();">{$info.corporate_name|default=$user_message.corporate_name}</a></span>                                                        
            <span>乙方：温州晟成科技信息技术服务有限公司</span>     
        </p>
        <p>
            <span>电话：{$user_message.mobile|default=''}</span>                                                        
            <span>客服电话：13757893763（微信同号）</span>
        </p>
        <p>
            <span>授权代表（章/签字）</span>                                           
            <span>授权代表（章/签字）</span>                             
        </p>
        <p>
            <span>签订日期：{$date['create_date']}</span>                 
            <span>签订日期：{$date['create_date']}</span>
        </p>
        </div>
        <div class="button" id="no">
            <!-- <a href="javascript:pdf();">
                PDF
            </a> -->
            <a href="javascript:sprint();">
                打印
            </a>
            <a href="javascript:hide_hetong();">
                返回
            </a>
        </div>
    </div>
    <div class="main" id="main">
        <div class="order-info">
            <label class="order_no">
                <span>订单号:</span><input type="text" id="order_no" value="{$order_no}" disabled>  
            </label>
        </div>
        <div class="order-info">
            <table>
                <thead>
                    <th>关键词</th>
                    <th>价格</th>
                </thead>
                <tbody>
                    {volist name="info.info" id="value"}
                    <tr>
                        <td>{$value.keyword}</td>
                        {eq name="info.type" value="4"}
                        {eq name="value.type" value="4"}
                        <td>主词</td>
                        {else}
                        <td>副词</td>
                        {/eq}
                        {else}
                        <td>{$value.price}</td>
                        {/eq}
                    </tr>
                    {/volist}
                </tbody>
                <tfoot></tfoot>
            </table>
        </div>
        <div class="order-info">
            <div class="order-info-message">
                推广类型:{$info.word_type}
            </div>
            <div class="order-info-message">
                推广时段:{$info.word_hover}
            </div>
            <div class="order-info-message">
                推广时长:{$info.word_day}
            </div>
            <div class="order-info-message">
                推广平台:{$info.keyword_area}
            </div>
            {eq name="info.keyword_area" value="百度"}
            <div>
                推广端口:{$info.type_text}
            </div>
            {/eq}
        </div>
        <div class="order-info" id="address-list">
            <div class="address-title">
                地区:
                {volist name="info.address_list" id="value"}
                <span>{$value}</span>
                {/volist}
            </div>
        </div>
        {neq name="info.keyword_area" value="百度"}
        <div class="order-info">
            <span>手机号码:</span>
            <label for="mobile">
                <input type="text" id="mobile" name="mss" value="{$info.mobile|default=''}" {eq name="info.status" value="2"}disabled{/eq}>
            </label>
        </div>
        <div class="order-info">
            <span>公司名称:</span>
            <label for="nickname">
                <input type="text" id="nickname" name="mss" value="{$info.nickname|default=''}" {eq name="info.status" value="2"}disabled{/eq}>
            </label>
        </div>
        {else}
        <div class="order-info">
            <span>推广网址:</span>
            <label for="web">
                <input type="text" id="web" name="mss" value="{$info.website|default=''}" {eq name="info.status" value="2"}disabled{/eq}>
            </label>
        </div>
        {/neq}
        <div class="order-info">
            <span>总价:
                {eq name="info.type" value="4"}
                    <a style="color:#aa2332;" href="javascript:save_amount('{$info.order_no}');">{$info.amount}</a>
                {else}    
                    {neq name="user_message.discount" value="1"}
                    <a href="javascript:save_amount('{$info.order_no}');">{$amount}</a> X 用户折扣:{$user_message.discount} = <b style="color:red;" id="keywords-discount-amount">{$info.amount}</b>
                    {else}
                    <a style="color:red;" href="javascript:save_amount('{$info.order_no}');">{$info.amount}</a>
                    {/neq}
                {/eq}
            </span>
        </div>
        {eq name="info.status" value="2"}
        <div class="order-info">
            <a href="javascript:hetong();" class="hetong">《关键词合同》</a>
        </div>
        {/eq}
        {eq name="info.status" value="1"}
        <div class="order-info">
            <a href="javascript:order_pay('{$order_no}');" class="button">确认下单</a>
        </div>
        {/eq}
    </div>
</body>
<script src="/static/js/base.js"></script>
<script>
    function hetong(){
        // block_mask_show();
        document.getElementById('main').style = 'display:none';
        document.getElementById('hetong').style = 'display:block';
        document.getElementById('yinzhang').style = 'display:block';
    }

    function hide_hetong(){
        document.getElementById('main').style = 'display:block';
        document.getElementById('hetong').style = 'display:none';
        document.getElementById('yinzhang').style = 'display:none';
    }

    function sprint(){
        hetong();
        document.getElementById('no').style = 'display:none';
        window.print();
        setTimeout(delayedFunction, 3000);
    }

    function delayedFunction(){
        document.getElementById('no').style = 'display:block';
    }

    function save_amount(order_no){
        $.ajax({
            url:'/index/order/save_amount',
            type: 'post', // 请求类型，可以是 'GET' 或 'POST'  
            dataType: 'json', // 预期服务器返回的数据类型  
            data:{q:1,order_no:order_no},
            success: function(res) { 
                if(res.code == 200){
                    block_mask_show();
                    document.getElementById('save_amount_div').style = 'display:block';
                }
            }
        });
    }

    function set_amount(order_no){
        let amount = document.getElementById('amount');
        if (!amount.value)
            return show_afert('修改的金额未填');
        $.ajax({
            url:'/index/order/save_amount',
            type: 'post', // 请求类型，可以是 'GET' 或 'POST'  
            dataType: 'json', // 预期服务器返回的数据类型  
            data:{q:2,order_no:order_no,amount:amount.value},
            success: function(res) { 
                if(res.code == 200){
                    location.reload();
                }
            }
        });
    }

    function pdf(){
        let html = document.getElementById('neirong').innerHTML;
        let form = document.createElement('form');
        let nameInput = document.createElement('input');
        form.method = 'POST';
        form.action = '/index/order/pdf?order={$order_no}';
        nameInput.type = 'text';
        nameInput.name = 'html';
        nameInput.value = html.replace(/</g, '|-').replace(/>/g, '-|'); // 替换为你要提交的数据
        console.log(nameInput);
        form.appendChild(nameInput);
        document.body.appendChild(form);
        // 提交表单
        form.submit();
        // 提交后移除表单（可选）
        document.body.removeChild(form);
    }

    function set_hetong_corporate_name(order_no = ''){
        if (order_no == ''){
            document.getElementById('save_hetong_corporate_name_div').style = 'display:block';;
        }else{
            let hetong_corporate_name = document.getElementById('hetong_corporate_name').value;
            $.ajax({
                url:'/index/order/save_hetong_corporate_name',
                type: 'post', // 请求类型，可以是 'GET' 或 'POST'  
                dataType: 'json', // 预期服务器返回的数据类型  
                data:{order_no:order_no,hetong_corporate_name:hetong_corporate_name},
                success: function(res) { 
                    if(res.code == 200){
                        location.reload();
                    }
                }
            });
        }
    }
    
</script>
</html>